new Vue({
    el: '#app',
    data() {
        return {
            form: { // 分页查询条件
                SQLSerialNumber: 'x_farm_operation_record',
                PaginationNumber: 1,
                RowAmount: 10,
                Condition: utf8ToBase64('%%'),
                ExtensionCondition: utf8ToBase64(`AND farm_operation_record.Open_ID='${getCookie('openId')}'
                AND farm_operation_record.Creater_SerialNumber='${getCookie('user')}'`),
            },
            tableData: [],
            type: [{
                label: '苗期',
                value: '0'
            }, {
                label: '开花期',
                value: '1'
            }, {
                label: '坐果期',
                value: '2'
            }, {
                label: '膨大期',
                value: '3'
            }, {
                label: '成熟期',
                value: '4'
            }],
            total: 0,//总条数
            loading: false,// 节流阀门
        }
    },
    beforeCreate() {
        function setRem() {
            const designWidth = 750; // 设计稿宽度（rpx）
            const maxWidth = 540; // 可选：限制最大宽度（如手机端常见值）
            const screenWidth = Math.min(window.innerWidth, maxWidth);
            const scale = screenWidth / designWidth;
            document.documentElement.style.fontSize = scale + 'px';
        }
        setRem();//1rem = 0.5px 对标小程序在 375px 宽的屏幕上，1rpx = 0.5px（因为 750rpx / 375px = 2）
    },
    mounted() {
        this.init();
    },
    computed: {
        tagCss() {
            return function (item) {
                if (item.Row_Status == '0') {
                    return { type: 'warning', label: '苗期' }
                } else if (item.Row_Status == '1') {
                    return { type: 'info', label: '开花期' }
                } else if (item.Row_Status == '2') {
                    return { type: 'warning', label: '坐果期' }
                }else if (item.Row_Status == '3') {
                    return { type: 'warning', label: '膨大期' }
                } else {
                    return { type: 'success', label: '成熟期' }
                }
            }
        }
    },
        methods: {
        async init(callback) {
            await Promise.allSettled([
                this.getList(this.form),
            ]);
            callback ? callback() : null;
        },
        handleChange(item) { // 切换类别
            this.form.PaginationNumber = 1; // 初始化
            this.form.Condition = utf8ToBase64(`%${item.value}%`);
            this.tableData = [];
            this.getList(this.form);
        },
        handleDetail(item) {
            window.location.href = `../detail/farm_operation_record_detail.html?id=${item.Farm_Operation_SerialNumber}`;
        },
        handleAdd() {
            window.location.href = `../submit/farm_operation_record_add.html`;
        },
        async getList(data) { // 分页查询
            if (this.loading) return;
            this.loading = true;//开启节流
            try {
                const res = await generalApi.generalPaginationQueryBySQLSerialNumberWithClient(data);
                this.tableData = [...this.tableData, ...res.Rows];
                this.total = res.TotalRows;
            } catch (error) {
                console.error(error);
            }
            this.loading = false;//关闭节流
        },
        handleScroll(e) { // 滚动监听
            const { scrollTop, clientHeight, scrollHeight } = e.target;
            if (scrollTop + clientHeight >= scrollHeight && !this.loading && this.tableData.length < this.total) {
                this.form.PaginationNumber++;
                this.getList(this.form)
            }
        },

    },
})

